<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .upload-container {
            background: white;
            padding: 2em;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            text-align: center;
            transition: transform 0.3s ease-in-out;
        }
        h2 {
            margin-bottom: 1em;
            color: #333;
            font-size: 1.5rem;
        }
        .file-input {
            margin-bottom: 1em;
            position: relative;
        }
        input[type="file"] {
            display: none;
        }
        .custom-file-upload {
            display: inline-block;
            padding: 0.75em 2em;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            font-size: 1rem;
        }
        .custom-file-upload:hover,
        .custom-file-upload:focus {
            background-color: #0056b3;
            transform: scale(1.02);
        }
        button {
            padding: 0.75em 2em;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            font-size: 1rem;
        }
        button:hover,
        button:focus {
            background-color: #218838;
            transform: scale(1.02);
        }
        p {
            margin-top: 1em;
            color: #6c757d;
            font-size: 0.9rem;
        }
        .preview img {
            max-width: 100%;
            border-radius: 5px;
            margin-top: 1em;
            animation: fadeIn 0.5s;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .error {
            color: #dc3545;
            font-size: 0.9em;
            margin-top: 0.5em;
            font-weight: bold;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            h2 {
                font-size: 1.2rem;
            }
            .custom-file-upload, button {
                font-size: 0.8rem;
                padding: 0.5em 1.5em;
            }
        }
    </style>
</head>
<body>
<div class="upload-container">
    <h2>文件上传表单</h2>
    <form id="uploadForm" action="doUpload" method="post" enctype="multipart/form-data">
        <!-- 单文件上传 -->
        <div class="file-input">
            <label for="file" class="custom-file-upload"><i class="fas fa-file-upload"></i> 选择文件</label>
            <input type="file" id="file" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.doc,.docx,.xls,.xlsx" />
        </div>
        <div>
            <button type="submit"><i class="fas fa-upload"></i> 上传文件</button>
        </div>
        <!-- 文件预览 -->
        <div class="preview"></div>
        <!-- 提示信息 -->
        <p>支持的文件类型: .jpg, .jpeg, .png, .gif, .bmp, .pdf, .doc, .docx, .xls, .xlsx</p>
        <!-- 错误提示 -->
        <div class="error" id="error"></div>
    </form>
</div>

<script>
    document.getElementById('file').addEventListener('change', function() {
        const file = this.files[0];
        const preview = document.querySelector('.preview');
        const error = document.getElementById('error');
        error.textContent = '';

        // 清除之前的预览
        while (preview.firstChild) {
            preview.removeChild(preview.firstChild);
        }

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                preview.appendChild(img);
            };
            reader.readAsDataURL(file);
        } else {
            preview.innerHTML = '<p style="color:#aaa;">没有选择文件</p>';
        }

        // 文件类型和大小验证
        const validTypes = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.pdf', '.doc', '.docx', '.xls', '.xlsx'];
        const fileType = file ? file.name.substring(file.name.lastIndexOf('.')).toLowerCase() : '';
        const maxSizeMB = 5; // 最大文件大小为5MB
        const fileSizeMB = file ? file.size / 1024 / 1024 : 0;

        if (!validTypes.includes(fileType)) {
            error.textContent = '不支持的文件类型';
            document.getElementById('uploadForm').reset();
        } else if (fileSizeMB > maxSizeMB) {
            error.textContent = '文件太大，最大支持' + maxSizeMB + 'MB';
            document.getElementById('uploadForm').reset();
        }
    });
</script>
</body>
</html>